<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="详情信息"-->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack"> </header-nav>
    </div>
    <div class="detail_body">
        <div class="title">{{itemInfo.title}}</div>
        <div class="small-title">
          <div>作者：{{itemInfo.author}}</div>
          <div>发布时间：{{itemInfo.releaseTime}}</div>
          <div>来源：{{itemInfo.source}}</div>
        </div>
        <div style="">
          <div style="font-size: 14px" v-html="itemInfo.content"></div>
        </div>
      <van-cell  v-for="(item, index) in itemInfo.responseDtoList"
                 :title="item.title">
        <template #value>
          <span class="text-button" @click="download(item.address)">下载</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script setup name="ItemInfo">
import {GET_POLICY_DETAIL} from "@/api/cooperativeOffice/individualQuery.js";
const router = useRouter();
const itemInfo = ref({})
onMounted(() => {
  getPageInfo()
})
const getPageInfo = async (onLoad) => {
  const res = await GET_POLICY_DETAIL({
    policyId: router?.currentRoute?.value?.query.policyId
  });
  itemInfo.value = res.data
};
const download = (item) => {
  window.open(item); //url为下载http地址
}
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.detail_body {
  overflow: auto;
  height: 100%;
  background-color: #ffff;
  padding: 20px 15px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.small-title {
  margin: 10px 0;
  font-size: 16px;
  //display: flex;
  //justify-content: space-around;
}
</style>